<template>
  <div v-if="showLoad" class="loading-box">
      <!-- 默认动画 -->
      <div v-if="loadType==1" :style="{width:`${finaleModelWidth}px`,height:`${finaleModelWidth}px`}" class="load-spinner load-spinner-default">
          <div class="load-icon iconfont icon-load-default" :style="{'line-height':`${finaleModelWidth*0.7}px`}"></div>
          <div class="load-content" :style="{'line-height':`${finaleModelWidth*0.3}px`}">{{loadContent}}</div>
      </div>
      <!-- 加载动画2 -->
      <ul v-if="loadType==2" :style="{width:`${finaleModelWidth}px`,height:`${finaleModelWidth}px`}" class="load-spinner load-spinner-rect">
        <li v-for="(item,index) in 5" class="load-inner" :style="{background:finaleCircleColor}"  :key="index"></li>
      </ul> 
      <!-- 加载动画3 -->
      <div v-if="loadType==3" :style="{width:`${finaleModelWidth}px`,height:`${finaleModelWidth}px`}" class="load-spinner load-spinner-plane">
        <span class="load-inner" :style="{background:finaleCircleColor}"></span>
      </div> 
      <!-- 加载动画4 -->
      <ul v-if="loadType==4" :style="{width:`${finaleModelWidth}px`,height:`${finaleModelWidth}px`}" class="load-spinner load-spinner-cube">
        <li v-for="(item,index) in 2" class="load-inner" :style="{background:finaleCircleColor}"  :key="index">
        </li>
      </ul> 
      <!-- 加载动画5 -->
      <ul v-if="loadType==5" :style="{width:`${finaleModelWidth}px`,height:`${finaleModelWidth}px`}" class="load-spinner load-spinner-bounce">
        <li v-for="(item,index) in 3" class="load-inner" :key="index">
            <span class="circle" :style="{background:finaleCircleColor}"></span>
        </li>
      </ul> 
  </div>
</template>
<script>
export default {
  name:"loding",
  props:{
    showLoad:{
        type:Boolean,
        default:false
    },
    loadType:{
        type:Number,
        default:1
    },
    modelWidth:{
        type:Number,
        default:100
    },
    circleColor:{
        type:String,
        default:"#67cf22"
    },
    loadContent:{
        type:String,
        default:"加载中..."
    }
  },
  data(){
      return{

      }
  },
  computed:{
      finaleModelWidth(){
        return this.modelWidth>=250?250:(this.modelWidth<=100?100:this.modelWidth)
      },
      finaleCircleColor(){
          var colorReg = /^#(?:[0-9a-f]{3}){1,2}$/i;
          return colorReg.test(this.circleColor)?this.circleColor:"lightgreen"
      }
  }
}
</script>

<style lang="less" scoped>
.loading-box{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .15);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 99999;
    .load-spinner{
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        &.load-spinner-default{
            flex-direction: column;
            border-radius: 4px;
            background: rgba(0, 0, 0, .7);
            .load-icon{
                width: 100%;
                height: 70%;
                animation-name: loop;
                animation-duration: 1.2s;
                animation-timing-function:linear;
                animation-iteration-count: infinite;
                animation-direction: normal;
                color: #fff;
                text-align: center;
                &.iconfont.icon-load-default{
                  font-size: 2.5rem;
                }
            }
            .load-content{
                width: 100%;
                height: 30%;
                color: #fff;
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        &.load-spinner-rect{
           font-size: 12px;
            .load-inner{
                flex-basis: 6px;
                margin: 0 auto;
                height: 60px;
                animation: stretchdelay 1.2s infinite ease-in-out;
                &:nth-of-type(2){
                    animation-delay: -1.1s;
                }
                &:nth-of-type(3){
                    animation-delay: -1.0s;
                }
                &:nth-of-type(4){
                    animation-delay: -0.9s;
                }
                &:nth-of-type(5){
                    animation-delay: -0.8s;
                }
            }
            
        } 
        &.load-spinner-plane{
            .load-inner{
                display: block;
                width: 60px;
                height: 60px;
                animation: rotateplane 1.2s infinite ease-in-out;
            }
        }
        &.load-spinner-cube{
            position: relative;
            .load-inner{
                position: absolute;
                width: 30px;
                height: 30px;
                top: 25%;
                left: 25%;
                margin: 0 auto;
                animation: cubemove 1.8s infinite ease-in-out;
                &:nth-of-type(2){
                    animation-delay: -0.9s;
                }
            }
        }
        &.load-spinner-bounce  .load-inner{
            flex-basis: 33%;
            text-align: center;
            .circle{
                display: block;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                animation: bouncedelay 1.4s infinite ease-in-out;
            }
            &:first-child .circle{
                animation-delay: -0.32s;
            }
            &:nth-of-type(2){
                animation-delay: -0.16s;
            }
        }
    }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
@keyframes cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes loop {
    form{
        transform:rotate(0)
    }
    to{
        transform: rotate(360deg)
    }
}
</style>

